<template>
  <div>
    <div class="operate_wrap flex" style="margin-left: 25px">
      <div class="flex-center g-flex flex-right">
        <!--  <el-select
        style="float: none; margin: 0; margin-right: 15px"
        class="select"
        size="small"
        v-model="search.company"
        v-on:change="fixQueryA()"
        value-key="id"
        clearable
        placeholder="选择公司"
      >
        <el-option
          v-for="item in companyTree"
          :key="item.id"
          :label="item.name"
          :value="item"
        >
        </el-option>
      </el-select>-->

        <el-select class="select" size="small" v-model="search.projectId" v-on:change="getList()" value-key="id" clearable filterable placeholder="选择项目">
          <el-option v-for="item in projectTree" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div>
    </div>

    <div class="list_wrap" style="padding: 0 20px">
      <el-table class="approveItem-problem-table" :border="true" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" ref="multipleTable" :data="list" tooltip-effect="dark" @cell-click="cellClick" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px">
        <el-table-column show-overflow-tooltip label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="projectName" align="left" width="250" label="项目名称">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="postWeek" align="left" label="所在周">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="problem" align="left" label="存在问题">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="createrName" align="left" width="160" label="登记人">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="createTime" align="left" label="登记时间">
          <template slot-scope="scope">
            <div style="text-align: left">
              {{ scope.row.createTime }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="float: right; margin-top: 30px" layout="prev, pager, next" :page-size="search.pageSize" :total="search.pageSum" :current-page="search.pageIndex + 1" :prev-text="tablePaginationPrev" :next-text="tablePaginationNext" @current-change="paginationChange">
      </el-pagination>
    </div>

    <problemDetail :postDetail="postProblemDetailData" @reloadList=""></problemDetail>
  </div>
</template>

<script>
import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
} from '@/utils/publicFun'
import { getSnakeData, getListForProblem, getCompanyTree, getProject } from '@/api/buss/frontProject'
import projectSectionInfo from "@/api/buss/common";
import publicSearchData from '@/mixins/publicSearchData'
export default {
  mixins: [publicSearchData],
  components: {
    problemDetail: require(`../item/item-detail/item-problem-detail`).default
  },
  name: 'problem',
  data() {
    return {
      // 向详情子组件的传值
      postProblemDetailData: {
        show: false,
        type: 'show',
        typeNmae: '查看',
      },
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      tablePaginationPrev: '上一页',
      tablePaginationNext: '下一页',
      list: [],
      companyTree: [],
      projectTree: [],
      search: {
        subcontractName: '',
        pageIndex: 0,
        pageSize: 15,
        pageSum: 0,
        contractId: '',
        searchType: '', // 合同类型
        searchName: '', // 合同名称
        company: { children: [] },
        companyId: '',
        project: { children: [] },
        sectionId: '',
      },
    }
  },
  computed: {
    tableHeight: function () {
      return (window.innerHeight - 300) + 'px';
    }
  },
  created() {
    this.getProjectTree()
  },
  methods: {
    handleClickDeal(row, type) {
      let detailId = row.id
      switch (type) {
        // 查看
        case 'show':
          // 显示详情弹窗
          this.showDetailDialog(type, {
            detailId: detailId,
          })
          break
      }
    },
    // 显示详情弹窗 不同状态
    showDetailDialog(flag, params) {
      if (!params) {
        params = {}
      }
      let postData = {}
      switch (flag) {
        case 'show':
          postData = {
            show: true,
            type: 'check',
            typeName: '查看',
            params: params,
          }
          break
      }
      this.postProblemDetailData = postData

    },
    cellClick(row, column, cell, event) {
      if (column.property === 'problem') {
        this.handleClickDeal(row, 'show')
      }
    },
    fixQueryB() {
      this.getList()
    },
    fixQueryA() {
      // this.projectTree = res.list
      // this.search.project = this.search.company.children[0]
      this.getList()
      // getProject({companyId : this.search.company.id}).then((res) => {
      //   this.projectTree = res.list
      //   this.search.project = res.list[0]
      //   this.getList()
      // })
      //   .catch((res) => {
      //     console.log('请求出现错误', res)
      //     this.isLoading = false
      //     // this.$messageError(this.$route.name + '提交详情-请求失败')
      //   })
    },
    getProjectTree() {
      projectSectionInfo.getProjSecTreeAll().then(res => {
        if (res.code === 200) {
          console.log(res)
          this.$set(this, 'projectTree', res.data)
          if (this.$headerSearch) {
            this.$set(this.search, 'projectId', this.changeHeaderProject)
            this.getList(true)
          }
        } else {
          this.$messageError(res.data.message)
        }
      }).catch(() => {
        this.$messageError('获取项目标段树失败')
      })
    },
    // 切换列表
    paginationChange(index) {
      this.search.pageIndex = index - 1
      this.getList()
    },
    getList() {
      this.list.splice(0, this.list.length)
      getListForProblem(this.search).then((res) => {
        if (res.code === 200) {
          let data = res.data
          if (data.content != null) {
            let content = data.content
            content.forEach(item => {
              let temp = {}
              temp.id = item.id
              temp.projectName = item.projectName
              temp.createrName = item.createrName
              temp.problem = item.problem
              temp.createTime = item.createTime
              temp.postWeek = item.postWeek
              this.list.push(temp)
            })
          }

        } else {
          this.isLoading = false
          // this.$messageError(res.data.message)
        }
      })
        .catch((res) => {
          console.log('请求出现错误', res)
          this.isLoading = false
          this.$messageError(this.$route.name + '提交详情-请求失败')
        })
    },
  },
}
</script>

<style scoped lang="scss">
.operate_wrap {
  .select {
    width: 250px;
    margin-right: 15px;
  }
}
</style>
